body {
    margin: 0;
}

.page {
    display: flex;
    flex-direction: column;
    width: 76vw;
    height: 78%;
    margin: 22% 12vw;
    overflow: auto;
    background: #372e69;
    background: linear-gradient(180deg, #2c245c 0%, #60549a 100%);
    // background-image: url('../../resource/level/background.png');
    background-size: 100% 100%;
    border-radius: 20px * 0.76;
    div {
        position: relative;
        z-index: 10;
    }

    &::before {
        position: fixed;
        top: 353px * 0.76;
        left: 60px * 0.76;
        display: block;
        width: 239px * 0.76;
        height: 239px * 0.76;
        background: #b3a9dd;
        border-radius: 50%;
        opacity: 0.5;
        filter: blur(60px * 0.76);
        // height: 100vh;
        // background-image: url(../../resource/level/background.png);
        // background-size: 100% 80%;
        // background-repeat: no-repeat;
        content: '';
    }

    .top_view {
        width: 184px * 0.76;
        height: 52px * 0.76;
        margin: 0 auto;
        padding-top: 4%;
        color: #fff;
        font-size: 34px * 0.76;
        font-family: YouSheBiaoTiHei;
        line-height: 52px * 0.76;
        text-align: center;
        text-shadow: 0 5px * 0.76 0 rgba(0, 0, 0, 0.3);
    }

    .img_wrapper {
        display: flex;
        justify-content: center;
        width: 100%;

        img {
            width: 345px * 0.76;
            height: 272px * 0.76;
            margin: auto;
            margin-top: 1%;
        }
    }

    .content {
        flex: 1;
        width: 328px * 0.76;
        margin: 0 auto;
        margin-top: 2%;
        margin-bottom: 10px;
        padding: 18px 0;
        overflow: auto;
        border: 2px * 0.76 dashed #91908f;
        border-radius: 8px * 0.76;

        .career {
            position: relative;
            width: 100%;
            height: 20%;
            margin-bottom: 25px;

            &:first-child {
                margin-top: 0;
            }

            .hollow {
                position: absolute;
                top: 6%;
                left: 4%;
                z-index: 99;
                width: 24px * 0.76;
                height: 24px * 0.76;
                line-height: 24px * 0.76;
                text-align: center;
                border: 1px * 0.76 solid #0f0600;
                border-radius: 15px * 0.76;
            }

            .solid {
                position: absolute;
                top: 6%;
                left: 5%;
                width: 24px * 0.76;
                height: 24px * 0.76;
                background: #4fdd94;
                border-radius: 15px * 0.76;
            }

            .title {
                position: absolute;
                top: 8%;
                left: 16%;
                width: 265px * 0.76;
                color: #fff;
                font-weight: 600;
                font-size: 16px * 0.76;
            }

            .feature {
                width: 100%;
                height: 40px * 0.76;
                // position: absolute;
                // top: 35%;
                // left: 13%;
                margin-top: 8px * 0.76;
                color: rgba(255, 255, 255, 0.7);
                font-weight: 400;
                font-size: 14px * 0.76;
                line-height: 20px * 0.76;
            }
        }
    }
}
